<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>找回密码</title>

    <!--核心Css文件-->
    <link rel="stylesheet" type="text/css" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery-1.12.4/jquery-1.12.4.min.js" type="text/javascript"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
        window.onload = function () {
            /*在gameid增加对检查按钮的验证*/
            var submitBtn = document.getElementById("reg");

            submitBtn.onclick = function () {
                if (!document.getElementById("checkbox").checked) {
                    alert("请阅读注册协议,并勾选按钮!");
                    return false;
                }
            };
        }
    </script>
</head>

<body style="background: url('moban5146/assets/images/backgrounds/team-bg-1-1.png') no-repeat;
width: 100%; height: 100%; background-size: cover; ">

<div>

    <div style="width: 90%; margin: 10px auto; background: #FFFFFF">
        <div>
            <div style="width: 5px; height: 30px; background-color: #008fd5; position: absolute; margin: 20px auto;"></div>
            <h3 style="margin: 20px 10px; position: absolute">找回密码</h3>
        </div>
        <div>
            <hr>
        </div>
        <div style="padding: 2%">
            <hr>
            <form class="form-horizontal" role="form" action="/register" method="post">
                <div class="form-group">
                    <label for="nickName" class="control-label col-sm-5">账&ensp;号&ensp;名:</label>
                    <div class="col-sm-3 has-feedback" id="nickName-box">
                        <input type="text" class="form-control" id="nickName" name="nickName" placeholder="请输入账号名"
                               required="">
                        <span id="nickName-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="nickName-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="userPsw" class="control-label col-sm-5">密&emsp;&emsp;码:</label>
                    <div class="col-sm-3 ">
                        <input type="password" class="form-control" id="userPsw" name="password" placeholder="请输入密码"
                               required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password2" class="control-label col-sm-5">确认密码:</label>
                    <div class="col-sm-3 has-feedback" id="password2-box">
                        <input type="password" class="form-control" id="password2" name="password2" placeholder="请再次输入密码"
                               required>
                        <span id="miss-matching" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="password2-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-sm-5">邮&emsp;&emsp;箱:</label>
                    <div class="col-sm-3 has-feedback" id="email-box">
                        <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱"
                               required="">
                        <span id="miss-email" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="email-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="userName" class="control-label col-sm-5">姓&emsp;&emsp;名:</label>
                    <div class="col-sm-3 has-feedback" id="userName-box">
                        <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入账号名"
                               required="">
                        <span id="userName-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="userName-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="phone" class="control-label col-sm-5">手&ensp;机&ensp;号:</label>
                    <div class="col-sm-3 has-feedback" id="phone-box">
                        <input type="text" class="form-control" id="phone" name="phonenumber" placeholder="请输入手机号"
                               required="">
                        <span id="phone-exists" class="glyphicon form-control-feedback"></span>
                    </div>
                    <p id="phone-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="sex" class="control-label col-sm-5">性&emsp;&emsp;别:</label>
                    <div class="col-sm-3" id="sex-box">
                        <input type="radio"  id="sex" name="sex" value="0" /> 男 &emsp;&emsp;
                        <input type="radio" name="sex" value="1" /> 女
                    </div>
                    <p id="sex-help" class="help-block"></p>
                </div>
                <div class="form-group">
                    <label for="identify" class="col-sm-5 control-label">验&ensp;证&ensp;码:</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="identify" name="identify" required placeholder="验证码">
                    </div>
                    <img id="identify-code">
                </div>
                <div class="form-group">
                    <div class="checkbox col-sm-offset-5 col-sm-5">
                        <input id="checkbox" type="checkbox"><i></i> 我同意注册协议</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-5">
                        <button type="submit" id="reg" class="btn btn-primary">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;注&emsp;&emsp;册&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</button>
                    </div>
                </div>

            </form>
        </div>

    </div>
</div>
<!--   底部-->
<div class="row" style="width: 100%; bottom: 0; text-align: center">
    <div class="col-sm-12">Pocket © 2021 All Rights Reserved</div>
    <div class="col-sm-12">Joker小组版权所有</div>
</div>
<script>
    //验证密码


</script>
<script>
    $(function () {
        /*这个可以防止浏览器后退时候图片不刷新*/
        $("#identify-code").prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());

        let $form = $("form");

        /*点击框自动清空内容*/
        $form.on("click", ":input[type!=submit]", function () {
            $(this).prop("value", "");
        });

        /*添加勾这个图标*/
        function addOK(box, span) {
            span.removeClass("glyphicon-remove");
            box.removeClass("has-error");
            span.addClass("glyphicon-ok");
            box.addClass("has-success");
        }

        /*添加×这个图标*/
        function addRemove(box, span) {
            span.removeClass("glyphicon-ok");
            box.removeClass("has-success");
            span.addClass("glyphicon-remove");
            box.addClass("has-error");
        }

        /*两次密码验证*/
        $("#password2,#userPsw").blur(function () {
            let password = $("#userPsw").val();
            let password2 = $("#password2").val();
            let $missmatchingSpan = $("#miss-matching");
            let $password2Box = $("#password2-box");
            let $password2Help = $("#password2-help");

            if (password.trim() === "" || password2.trim() === "" || password2 !== password) {
                addRemove($password2Box, $missmatchingSpan);
                $password2Help.html("两次密码不一致");
            } else {
                addOK($password2Box, $missmatchingSpan);
                $password2Help.html("");
            }
        });
        /*邮箱校验*/
        $("#email").blur(function () {
            let email = $("#email").val();
            var reg= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            let $emailExists = $("#miss-email");
            let $emailBox = $("#email-box");
            let $emailHelp = $("#email-help");

            if (!reg.test(email)) {
                addRemove($emailBox, $emailExists);
                $emailHelp.html("邮箱格式错误");
            } else {
                addOK($emailBox, $emailExists);
                $emailHelp.html("");
            }
        });

        /*手机号校验*/
        $("#phone").blur(function () {
            let phone = $("#phone").val();
            var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
            let $phoneExists = $("#phone-exists");
            let $phoneBox = $("#phone-box");
            let $phoneHelp = $("#phone-help");

            if (!regex.test(phone)) {
                addRemove($phoneBox, $phoneExists);
                $phoneHelp.html("手机号格式错误");
            } else {
                addOK($phoneBox, $phoneExists);
                $phoneHelp.html("");
            }
        });



        /*ajax验证后台用户名是否存在*/
        $("#username").blur(function () {
            let username = $("#username").val().trim();
            if (username !== "") {
                $.ajax({
                    url: "register",
                    type: "post",
                    data: {
                        identify: identify
                    },
                    dataType: "text",
                    success: function (data) {
                        let $usernameBox = $("#nickName");
                        let $userExistsSpan = $("#nickName-exists");
                        let $usernameHelp = $("#nickName-help");

                        if (data === "exists") {
                            addRemove($usernameBox, $userExistsSpan);
                            $usernameHelp.html("用户名已存在");
                        } else {
                            addOK($usernameBox, $userExistsSpan);
                            $usernameHelp.html("用户名可以用");
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                })
            }
        });

        /*点击生成新的验证码*/
        $("#identify-code").click(function () {
            $(this).prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());
        });

    })


    /*$(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });*/
</script>

</body>

</html>